<template>
 <div class="rating_page">
      <head-top head-title="确认订单" :goBack=true signin-up='confirmOrder'></head-top>
   <scroll id="scroll_section" v-if="!showLoading" class="scroll_container" :data="deliverable">
     <div>
       <ul class="deliverable_address">
         <li v-for="(item,index) in deliverable"  @click.prevent.stop="chooseAddress(item, index)">
          <span class="choosed_address" :class="{default_address: defaultIndex == index}">
             <i class="fa fa-check-circle" ></i>
          </span>
           <div>
             <header>
               <span>{{item.name}}</span>
               <span>{{item.sex == 1? '先生' : '女士'}}</span>
               <span>{{item.phone}}</span>
             </header>
             <div class="address_detail ellipsis">
               <span v-if="item.tag" :style="{backgroundColor: iconColor(item.tag)}">{{item.tag}}</span>
               <p>{{item.address_detail}}</p>
             </div>
           </div>
         </li>
       </ul>
       <section id="out_delivery" v-if="!deliverdisable.length">
         <header class="out_header">以下地址超出配送范围(模拟)</header>
         <ul class="deliverable_address">
           <!--         <li v-for="(item,index) in deliverdisable">-->
           <li v-for="(item,index) in deliverable">
           <span class="choosed_address error">
             <i class="fa fa-remove" ></i>
          </span>
             <div>
               <header>
                 <span>{{item.name}}</span>
                 <span>{{item.sex == 1? '先生' : '女士'}}</span>
                 <span>{{item.phone}}</span>
               </header>
               <div class="address_detail ellipsis">
                 <span v-if="item.tag" :style="{backgroundColor: '#ccc', color: '#fff'}">{{item.tag}}</span>
                 <p>{{item.address_detail}}</p>
               </div>
             </div>
           </li>
         </ul>
       </section>
     </div>
   </scroll>
   <div ref="loading" class="loading-container" v-show="showLoading">
     <loading></loading>
   </div>
   <router-link to="/confirmOrder/chooseAddress/addAddress" class="add_icon_footer" >
     <span><i class="fa fa-plus-circle"></i></span>
     <span>新增收货地址</span>
   </router-link>
   <transition name="router-slid" mode="out-in">
     <router-view></router-view>
   </transition>
 </div>
</template>

<script type="text/ecmascript-6">
  import { getAddressList} from 'src/service/getData'
  import {mapGetters, mapMutations} from 'vuex'
  import scroll from 'components/common/scroll/scroll'
  import loading from 'components/common/loading/loading'
import headTop from 'components/header/head'
  export default {
  data(){
     return{
       addressList: [], //地址列表
       deliverable: [], //有效地址列表
       deliverdisable: [], //无效地址列表
       showLoading:true,
       id: null, //ID
       sig: null,
     }
   },
   created(){
     this.id = this.$route.query.id;
     this.sig = this.$route.query.sig;
     this.initData()
   },
   mounted(){
   },
   computed: {
     ...mapGetters([
       'userInfo', 'addressIndex', 'newAddress'
     ]),
     defaultIndex(){

       //从vuex获取地址索引
       if(this.addressIndex){
         return this.addressIndex
       }else{
         return 0;
       }
     }
   },
   methods: {
     ...mapMutations([
       'CHOOSE_ADDRESS'
     ]),
     chooseAddress(item, index){},
     //初始化信息
     async initData(){
       this.addressList = [];
       this.deliverable = [];
       this.deliverdisable = [];
       if (this.userInfo && this.userInfo.user_id) {
         this.addressList = await getAddressList(this.userInfo.user_id);
         //将当前所有地址访问分为有效无效两种
         this.addressList.forEach(item => {
           if (item.is_deliverable) {
             this.deliverable.push(item);
           }else{
             this.deliverdisable.push(item);
           }
         })
       }
       this.showLoading = false;
     },
     //选择地址
     chooseAddress(address, index){
       this.CHOOSE_ADDRESS({address, index});
       //this.$router.go(-1);
     },
     iconColor(name){
       switch(name){
         case '公司': return '#4cd964';
         case '学校': return '#3190e8';
       }
     },
   },
    watch:{
      userInfo: function (value) {
        if (value && value.user_id) {
          this.initData();
        }
      },
      newAddress: function (value) {
        this.initData();
      }
    },
   components:{
     loading,
     scroll,
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../../style/mixin';
@import '../../../style/css/font-awesome.min.css';
.scroll_container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 1.95rem;
  overflow-y: auto;
}
.list_cotainer{
  padding-bottom: 5rem;
}
.add_icon_footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 204;
  span{
    @include sc(.7rem, $blue);
    margin-left: .3rem;
  }
}
.deliverable_address{
  background-color: #fff;
  li{
    display: flex;
    align-items: center;
    border-bottom: 0.025rem solid #f5f5f5;
    padding: .7rem;
    line-height: 1rem;
    .choosed_address{
      @include wh(.8rem, .8rem);
      color: #4cd964;
      margin-right: .4rem;
      opacity: 0;
      .fa{
        font-size: .8rem;
      }
    }
    .error{
      opacity: 1;
    }
    .default_address{
      opacity: 1;
    }
    header{
      @include sc(.7rem, #333);
      span:nth-of-type(1){
        font-size: .8rem;
        font-weight: bold;
      }
    }
    .address_detail{
      width: 100%;
      display: flex;
      align-items: center;
      span{
        @include sc(.5rem, #fff);
        border-radius: .15rem;
        background-color: #ff5722;
        height: .6rem;
        line-height: .6rem;
        padding: 0 .2rem;
        margin-right: .3rem;
      }
      p{
        @include sc(.6rem, #777);
      }
    }
  }
}
#out_delivery{
  .out_header{
    @include sc(.6rem, #666);
    line-height: 1.5rem;
    padding-left: .5rem;
    background-color: #f5f5f5;
  }
  *{
    color: #ccc;
  }
}
.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
